<!-- 申请工作填写信息 -->
<template>
  <div>
     <van-form @submit="toApply">
      <div class="infoArea">
        <van-field
          v-model="name"
          label="姓名"
          placeholder="请输入姓名"
          name="name"
          :rules="[{ required: true, message: '请输入姓名' }]"/>

        <van-field
          v-model="bankCardNo"
          type="number"
          label="银行卡"
          placeholder="请输入正确的银行卡号"
          name="bankCardNo"
          :rules="[{ pattern: bankCardNoTest, message: '请输入正确的银行卡号' }]"/>

        <van-field
          v-model="openingBank"
          label="开户行"
          placeholder="请输入银行卡开户行"
          name="openingBank"
          :rules="[{ required: true, message: '请输入银行卡开户行' }]">
        </van-field>
      </div>
      <div class="loginBtn">
        <van-button type="info" block native-type="submit">确定</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { toApply } from '@/api/account'
import { Toast } from 'vant'
export default {
  data () {
    return {
      name: '',
      bankCardNo: '',
      bankCardNoTest: /^([1-9]{1})(\d{11}|\d{15}|\d{16}|\d{17}|\d{18})$/,
      openingBank: ''
    }
  },
  methods: {
    toApply (value) {
      Toast.loading({
        message: '排队申请中...',
        forbidClick: true,
        duration: 0
      })
      const $this = this
      console.log(value)
      const params = {
        name: value.name,
        inAcctNo: value.bankCardNo,
        inAcctBankName: value.openingBank,
        taskNo: $this.$route.query.id
      }
      toApply(params).then(res => {
        Toast.clear()
        console.log('toApply', res)
        if (res.data.code === 10000) {
          $this.$router.replace({
            name: 'feedback'
          })
        } else {
          Toast.clear()
          Toast.fail(res.data.message)
        }
      })
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
  /* @import url(); 引入css类 */
  .loginBtn{
    width: 80%;
    margin: 50px auto;
  }
  .loginBtn button{
    border-radius: 5px;
  }
</style>
